<template>
	<page-meta @resize="resize"  :root-font-size="`${pageMeta.rootFontsize}px`">
	</page-meta>
	<!-- <view style="display:flex;flex-direction: column;">
		<text>rootFontsize字体大小：{{pageMeta.rootFontsize}}</text>
		<text>屏幕宽度：{{pageMeta.windowWidth}}</text>
		<text :style="`font-size: ${pageMeta.rootFontsize}px;`">rootFontsize大小的文字</text>
		<text :style="`font-size: 1rem;`">1rem大小的文字</text>
	</view> -->
</template>

<script>
	export default {
		name:"my-pageMeta",
		props:{
		},
		data() {
			return {
				pageMeta: {
					windowWidth: '',
					rootFontsize: '',
				}
			}
		},
		mounted() { //完成模板渲染后首次赋值
			this.pageMeta.windowWidth = uni.getSystemInfoSync().windowWidth
			this.pageMeta.rootFontsize = (this.pageMeta.windowWidth / 375) * 10 
		},
		watch: {//观察rootFontsize的变化，限制了最大16px后屏幕再大也不缩放了
			'pageMeta.rootFontsize'(e) {
				e > 16 ? this.pageMeta.rootFontsize = '16' : ''
				this.$emit('getInfo', this.pageMeta); // 调用父组件传递过来的方法，同时把数据传递出
				// vue3必须设置延时 不然不生效
				// setTimeout(()=>{
				// 	e > 16 ? this.pageMeta.rootFontsize = '16' : ''
				// },300)
			}
		},
		methods:{
			// uni自带的resize处理方法 设备屏幕大小
			resize(e) {
				// this.pageMeta.windowWidth = e.size.windowWidth;
				this.pageMeta.rootFontsize = (e.size.windowWidth / 375) * 10 
			},
			// 父组件通过ref的方式获取数据
			getVal(){
				return this.pageMeta
			}
		}
	}
</script>

<style>

</style>
